<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.css" />
		<link rel="stylesheet" type="text/css" href="css/headSearch.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" href="css/icons-extra.css" />
	</head>

	<body>
		<!--页面头部-->
		<header class="mui-bar mui-bar-nav">
			<a href="#" id="categoryClass">
				<div style="height: 40px;width: 18%;float: left;line-height: 45px;text-align: left;color: white;font-size: 14px;position: relative;">商品分类</div>
			</a>
			<h1 class="mui-title">
    			<div class="mui-input-row mui-search" id="search">
    				<input type="search" target='#'id="keyWord" style=""class="mui-input-clear mui-indexed-list-search-input"placeholder="搜索商品" />
    			</div>
    		</h1>
			<a id="btnSearch" style="display: none;" class="mui-icon mui-icon-search mui-pull-right"></a>
			<div id="login" style="height: 100%;width: 20%;float: right;line-height: 45px;text-align: right;color: white;font-size: 14px;">注册登录</div>
		</header>
		<div class="mui-content">
			<!--页面主要内容-->
			<div id="slider" class="mui-slider" style="margin-bottom: 10px;">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="images/timg4.jpg" style="max-height: 200px;height: 100px;">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="images/timg2.jpg" style="max-height: 200px;height: 100px;">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="images/timg.jpg" style="max-height: 200px;height: 100px;">
						</a>
					</div>
					<!-- 第三张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="images/timg3.jpg" style="max-height: 200px;height: 100px;">
						</a>
					</div>
					<!-- 第四张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="images/timg4.jpg" style="max-height: 200px;height: 100px;">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="images/timg2.jpg" style="max-height: 200px;height: 100px;">
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			<ul class="mui-table-view mui-grid-view" style="margin-top: 10px;">
				<h5 style="padding-top: 10px;margin-left: 20px;color: #333333;font-size: 14px;">名店推荐
					<span class="mui-pull-right more" style="color: #64C987;font-size: 12px;font-weight: 400;"id='pro8'>更多></span></h5>

				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a id="pro">
						<img class="mui-media-object" style="width: 60%;" src="images/timg6.jpg">
						<div class="mui-media-body" style="font-size: 12px;color: #393939;">商品</div>
					</a>
				</li>

				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a id="pro1">
						<img class="mui-media-object" style="width: 60%;" src="images/timg28.jpg">
						<div class="mui-media-body" style="font-size: 12px;color: #393939;">商品</div>
					</a>
				</li>

				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a id="pro2">
						<img class="mui-media-object" style="width: 60%;" src="images/timg10.jpg">
						<div class="mui-media-body" style="font-size: 12px;color: #393939;">商品</div>
					</a>
				</li>

				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a id="pro3">
						<img class="mui-media-object" style="width: 60%;" src="images/timg9.jpg">
						<div class="mui-media-body" style="font-size: 12px;color: #393939;">商品</div>
					</a>
				</li>

				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a id="pro4">
						<img class="mui-media-object" style="width: 60%;" src="images/timg21.jpg">
						<div class="mui-media-body" style="font-size: 12px;color: #393939;">商品</div>
					</a>
				</li>

				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a id="pro5">
						<img class="mui-media-object" style="width: 60%;" src="images/timg15.jpg">
						<div class="mui-media-body" style="font-size: 12px;color: #393939;">商品</div>
					</a>
				</li>
			</ul>
			<ul class="mui-table-view mui-grid-view" style="margin-top: 10px;">

				<h5 style="padding-top: 10px;margin-left: 20px;color: #333333;font-size: 14px;">热销美食
					<span class="mui-pull-right more"id="more"style="color: #64C987;font-size: 12px;font-weight: 400;">更多></span></h5>

				<li class="mui-table-view-cell mui-media mui-col-xs-6 product">
					<a id="pro6">
						<img class="mui-media-object" src="images/timg12.jpg">
						<div class="mui-media-body" style="font-size: 14px;color: #393939;margin-top: -4px;">美食</div>
						<div class="redColor">18/份</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6 product">
					<a id="pro7">
						<img class="mui-media-object" src="images/timg13.jpg">
						<div class="mui-media-body" style="font-size: 14px;color: #393939;margin-top: -4px;">美食</div>
						<div class="redColor">18/份</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6 product">
					<a href="#">
						<img class="mui-media-object" src="images/timg18.jpg">
						<div class="mui-media-body" style="font-size: 14px;color: #393939;margin-top: -4px;">美食</div>
						<div class="redColor">18/份</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6 product">
					<a href="#">
						<img class="mui-media-object" src="images/timg24.jpg">
						<div class="mui-media-body" style="font-size: 14px;color: #393939;margin-top: -4px;">美食</div>
						<div class="redColor">18/份</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6 product">
					<a href="#">
						<img class="mui-media-object" src="images/timg26.jpg">
						<div class="mui-media-body" style="font-size: 14px;color: #393939;margin-top: -4px;">美食</div>
						<div class="redColor">18/份</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6 product">
					<a href="#">
						<img class="mui-media-object" src="images/timg30.jpg">
						<div class="mui-media-body" style="font-size: 14px;color: #393939;margin-top: -4px;">美食</div>
						<div class="redColor">18/份</div>
					</a>
				</li>
			</ul>
			<div id="goTopBtn"></div>
			<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
			<script type="text/javascript">
				//控制一键置顶；
				$(window).scroll(function() {
					var sc = $(window).scrollTop();
					var rwidth = $(window).width()
					if(sc > 0) {
						$("#goTopBtn").css("display", "block");
						$("#goTopBtn").css("left", (rwidth - 50) + "px")
					} else {
						$("#goTopBtn").css("display", "none");
					}
				})
				$("#goTopBtn").click(function() {
					var sc = $(window).scrollTop();
					$('body,html').animate({
						scrollTop: 0
					}, 500);
				})
				$("#pro").bind("tap", function() {
					mui.openWindow({
						url: "shopDetail.html",
						id: "pro",
						show: {
							duration: 300
						}
					});
				});
				$("#categoryClass").bind("tap", function() {
					mui.openWindow({
						url: "categoryClass.html",
						id: "categoryClass",
						show: {
							duration: 300
						}
					});
				});
				$("#login").bind("tap", function() {
					mui.openWindow({
						url: "login.html",
						id: "login",
						show: {
							duration: 300
						}
					});
				});
				$("#pro1").bind("tap", function() {
					mui.openWindow({
						url: "404.html",
						id: "pro1",
						show: {
							duration: 300
						}
					});
				});
				$("#pro2").bind("tap", function() {
					mui.openWindow({
						url: "shopDetail.html",
						id: "pro2",
						show: {
							duration: 300
						}
					});
				});
				$("#pro3").bind("tap", function() {
					mui.openWindow({
						url: "shopDetail.html",
						id: "pro3",
						show: {
							duration: 300
						}
					});
				});
				$("#pro4").bind("tap", function() {
					mui.openWindow({
						url: "shopDetail.html",
						id: "pro4",
						show: {
							duration: 300
						}
					});
				});
				$("#pro5").bind("tap", function() {
					mui.openWindow({
						url: "shopDetail.html",
						id: "pro5",
						show: {
							duration: 300
						}
					});
				});
				$("#pro6").bind("tap", function() {
					mui.openWindow({
						url: "shopDetail.html",
						id: "pro6",
						show: {
							duration: 300
						}
					});
				});
				$("#pro7").bind("tap", function() {
					mui.openWindow({
						url: "404.html",
						id: "pro7",
						show: {
							duration: 300
						}
					});
				});
				$("#pro8").bind("tap", function() {
					mui.openWindow({
						url: "404.html",
						id: "pro8",
						show: {
							duration: 300
						}
					});
				});
			</script>
		</div>

		<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>